<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>动态资源查询</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.dynamic-resources-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-title {
			margin-bottom: 25px;
		}
		.page-title h2 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.page-title p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 实时概览 */
		.overview-section {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 15px;
			padding: 30px;
			margin-bottom: 25px;
			box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
		}
		.overview-title {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 20px;
			text-align: center;
		}
		.overview-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
		}
		.overview-item {
			text-align: center;
			background: rgba(255,255,255,0.1);
			padding: 20px;
			border-radius: 10px;
		}
		.overview-icon {
			font-size: 32px;
			margin-bottom: 12px;
		}
		.overview-value {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.overview-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.overview-change {
			font-size: 12px;
			margin-top: 8px;
		}
		
		/* 内容网格 */
		.content-grid {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 25px;
			margin-bottom: 25px;
		}
		.content-left {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		.content-right {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		
		/* 通用卡片 */
		.resource-card {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		}
		.card-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		/* 容量利用率 */
		.capacity-list {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		.capacity-item {
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
			border-left: 4px solid #667eea;
		}
		.capacity-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.warehouse-name {
			font-weight: 500;
			color: #333;
		}
		.capacity-status {
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
		}
		.status-high {
			background: #fff1f0;
			color: #ff4d4f;
		}
		.status-medium {
			background: #fff7e6;
			color: #fa8c16;
		}
		.status-low {
			background: #f6ffed;
			color: #52c41a;
		}
		.capacity-progress {
			margin-bottom: 10px;
		}
		.capacity-details {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #666;
		}
		
		/* 温区状态 */
		.zone-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}
		.zone-item {
			padding: 15px;
			border-radius: 8px;
			text-align: center;
			color: white;
			position: relative;
		}
		.zone-frozen {
			background: linear-gradient(135deg, #1890ff, #096dd9);
		}
		.zone-cold {
			background: linear-gradient(135deg, #52c41a, #389e0d);
		}
		.zone-fresh {
			background: linear-gradient(135deg, #fa8c16, #d46b08);
		}
		.zone-room {
			background: linear-gradient(135deg, #722ed1, #531dab);
		}
		.zone-name {
			font-weight: bold;
			margin-bottom: 8px;
		}
		.zone-temp {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.zone-capacity {
			font-size: 12px;
			opacity: 0.9;
		}
		.zone-status {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
		}
		.status-online {
			background: #52c41a;
		}
		.status-offline {
			background: #ff4d4f;
		}
		.status-warning {
			background: #fa8c16;
		}
		
		/* 时间段表格 */
		.schedule-table {
			width: 100%;
			border-collapse: collapse;
		}
		.schedule-table th,
		.schedule-table td {
			padding: 10px;
			text-align: center;
			border: 1px solid #f0f2f5;
		}
		.schedule-table th {
			background: #fafafa;
			font-weight: 600;
			color: #333;
		}
		.time-slot {
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			margin: 2px;
			display: inline-block;
		}
		.slot-available {
			background: #f6ffed;
			color: #52c41a;
			border: 1px solid #b7eb8f;
		}
		.slot-busy {
			background: #fff1f0;
			color: #ff4d4f;
			border: 1px solid #ffccc7;
		}
		.slot-reserved {
			background: #fff7e6;
			color: #fa8c16;
			border: 1px solid #ffd591;
		}
		
		/* 实时监控 */
		.monitor-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}
		.monitor-item {
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
			text-align: center;
		}
		.monitor-icon {
			font-size: 24px;
			color: #667eea;
			margin-bottom: 8px;
		}
		.monitor-value {
			font-size: 20px;
			font-weight: bold;
			color: #333;
			margin-bottom: 4px;
		}
		.monitor-label {
			font-size: 12px;
			color: #666;
		}
		.monitor-status {
			font-size: 11px;
			margin-top: 4px;
		}
		.status-normal {
			color: #52c41a;
		}
		.status-alert {
			color: #fa8c16;
		}
		.status-critical {
			color: #ff4d4f;
		}
		
		/* 图表容器 */
		.chart-container {
			height: 300px;
			margin-top: 15px;
		}
		
		/* 响应式设计 */
		@media (max-width: 1200px) {
			.content-grid {
				grid-template-columns: 1fr;
			}
		}
		@media (max-width: 768px) {
			.overview-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.zone-grid {
				grid-template-columns: 1fr;
			}
			.monitor-grid {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="dynamic-resources-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>动态资源查询</h2>
				<p>实时查看冷库剩余容量、可用温区、空闲时段等动态资源信息</p>
			</div>

			<!-- 实时概览 -->
			<div class="overview-section">
				<div class="overview-title">实时资源概览</div>
				<div class="overview-grid">
					<div class="overview-item">
						<div class="overview-icon">📦</div>
						<div class="overview-value">{{resourceOverview.totalCapacity}}</div>
						<div class="overview-label">总容量 (m³)</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">📊</div>
						<div class="overview-value">{{resourceOverview.availableCapacity}}</div>
						<div class="overview-label">可用容量 (m³)</div>
						<div class="overview-change">较昨日 +{{resourceOverview.capacityChange}}m³</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">🌡️</div>
						<div class="overview-value">{{resourceOverview.activeZones}}</div>
						<div class="overview-label">活跃温区</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">⏰</div>
						<div class="overview-value">{{resourceOverview.utilizationRate}}%</div>
						<div class="overview-label">平均利用率</div>
						<div class="overview-change">较昨日 +{{resourceOverview.utilizationChange}}%</div>
					</div>
					<div class="overview-item">
						<div class="overview-icon">🔄</div>
						<div class="overview-value">{{resourceOverview.availableSlots}}</div>
						<div class="overview-label">空闲时段</div>
					</div>
				</div>
			</div>

			<!-- 主要内容 -->
			<div class="content-grid">
				<!-- 左侧内容 -->
				<div class="content-left">
					<!-- 容量利用率 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-pie-chart"></i>
							冷库容量利用率
						</div>
						<div class="capacity-list">
							<div v-for="warehouse in warehouseCapacity" :key="warehouse.id" class="capacity-item">
								<div class="capacity-header">
									<span class="warehouse-name">{{warehouse.name}}</span>
									<span :class="['capacity-status', 'status-' + warehouse.level]">
										{{warehouse.levelText}}
									</span>
								</div>
								<div class="capacity-progress">
									<el-progress 
										:percentage="warehouse.utilizationRate" 
										:color="getProgressColor(warehouse.utilizationRate)"
										:show-text="false">
									</el-progress>
								</div>
								<div class="capacity-details">
									<span>已用: {{warehouse.usedCapacity}}m³</span>
									<span>利用率: {{warehouse.utilizationRate}}%</span>
									<span>剩余: {{warehouse.remainingCapacity}}m³</span>
								</div>
							</div>
						</div>
					</div>

					<!-- 容量趋势 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-data-line"></i>
							容量利用趋势
						</div>
						<div class="chart-container" id="capacityChart"></div>
					</div>

					<!-- 空闲时段表 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-time"></i>
							今日空闲时段安排
						</div>
						<table class="schedule-table">
							<thead>
								<tr>
									<th>冷库名称</th>
									<th>上午 (8:00-12:00)</th>
									<th>下午 (13:00-17:00)</th>
									<th>晚间 (18:00-22:00)</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="schedule in scheduleData" :key="schedule.warehouse">
									<td>{{schedule.warehouse}}</td>
									<td>
										<span v-for="slot in schedule.morning" :key="slot.time" 
											:class="['time-slot', 'slot-' + slot.status]">
											{{slot.time}}
										</span>
									</td>
									<td>
										<span v-for="slot in schedule.afternoon" :key="slot.time" 
											:class="['time-slot', 'slot-' + slot.status]">
											{{slot.time}}
										</span>
									</td>
									<td>
										<span v-for="slot in schedule.evening" :key="slot.time" 
											:class="['time-slot', 'slot-' + slot.status]">
											{{slot.time}}
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<!-- 右侧内容 -->
				<div class="content-right">
					<!-- 可用温区 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-thermometer"></i>
							可用温区状态
						</div>
						<div class="zone-grid">
							<div v-for="zone in temperatureZones" :key="zone.id" 
								:class="['zone-item', 'zone-' + zone.type]">
								<div :class="['zone-status', 'status-' + zone.status]"></div>
								<div class="zone-name">{{zone.name}}</div>
								<div class="zone-temp">{{zone.currentTemp}}°C</div>
								<div class="zone-capacity">可用: {{zone.availableCapacity}}m³</div>
							</div>
						</div>
					</div>

					<!-- 实时监控数据 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-view"></i>
							实时监控数据
						</div>
						<div class="monitor-grid">
							<div class="monitor-item">
								<div class="monitor-icon">🌡️</div>
								<div class="monitor-value">{{monitorData.avgTemperature}}°C</div>
								<div class="monitor-label">平均温度</div>
								<div class="monitor-status status-normal">✓ 正常</div>
							</div>
							<div class="monitor-item">
								<div class="monitor-icon">💧</div>
								<div class="monitor-value">{{monitorData.avgHumidity}}%</div>
								<div class="monitor-label">平均湿度</div>
								<div class="monitor-status status-normal">✓ 正常</div>
							</div>
							<div class="monitor-item">
								<div class="monitor-icon">⚡</div>
								<div class="monitor-value">{{monitorData.powerConsumption}}</div>
								<div class="monitor-label">耗电量 (kWh)</div>
								<div class="monitor-status status-alert">⚠ 偏高</div>
							</div>
							<div class="monitor-item">
								<div class="monitor-icon">🔔</div>
								<div class="monitor-value">{{monitorData.alarmCount}}</div>
								<div class="monitor-label">报警次数</div>
								<div class="monitor-status status-normal">✓ 正常</div>
							</div>
						</div>
					</div>

					<!-- 快速操作 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-setting"></i>
							快速操作
						</div>
						<div style="display: flex; flex-direction: column; gap: 10px;">
							<el-button type="primary" icon="el-icon-search" @click="queryAvailableSpace">
								查询可用空间
							</el-button>
							<el-button type="success" icon="el-icon-time" @click="checkTimeSlots">
								检查空闲时段
							</el-button>
							<el-button type="warning" icon="el-icon-thermometer" @click="monitorTemperature">
								温度监控
							</el-button>
							<el-button type="info" icon="el-icon-refresh" @click="refreshData">
								刷新数据
							</el-button>
						</div>
					</div>

					<!-- 预警信息 -->
					<div class="resource-card">
						<div class="card-title">
							<i class="el-icon-warning"></i>
							预警信息
						</div>
						<div v-if="alerts.length === 0" style="text-align: center; color: #999; padding: 20px;">
							<i class="el-icon-check" style="font-size: 32px; margin-bottom: 10px;"></i>
							<p>暂无预警信息</p>
						</div>
						<div v-else style="display: flex; flex-direction: column; gap: 10px;">
							<div v-for="alert in alerts" :key="alert.id" 
								style="padding: 10px; border-left: 4px solid #fa8c16; background: #fff7e6; border-radius: 4px;">
								<div style="font-weight: 500; color: #fa8c16; margin-bottom: 4px;">{{alert.title}}</div>
								<div style="font-size: 12px; color: #666;">{{alert.message}}</div>
								<div style="font-size: 11px; color: #999; margin-top: 4px;">{{alert.time}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					resourceOverview: {
						totalCapacity: 45200,
						availableCapacity: 12850,
						capacityChange: 320,
						activeZones: 18,
						utilizationRate: 71.6,
						utilizationChange: 2.3,
						availableSlots: 24
					},
					warehouseCapacity: [
						{
							id: 1,
							name: '北京大兴冷链中心',
							usedCapacity: 6400,
							remainingCapacity: 2100,
							utilizationRate: 75,
							level: 'high',
							levelText: '利用率高'
						},
						{
							id: 2,
							name: '上海浦东国际冷库',
							usedCapacity: 11200,
							remainingCapacity: 800,
							utilizationRate: 93,
							level: 'high',
							levelText: '利用率高'
						},
						{
							id: 3,
							name: '广州白云冷链园区',
							usedCapacity: 3600,
							remainingCapacity: 3200,
							utilizationRate: 53,
							level: 'medium',
							levelText: '利用率中等'
						},
						{
							id: 4,
							name: '杭州萧山冷链基地',
							usedCapacity: 5400,
							remainingCapacity: 1800,
							utilizationRate: 75,
							level: 'high',
							levelText: '利用率高'
						}
					],
					temperatureZones: [
						{
							id: 1,
							type: 'frozen',
							name: '冷冻区',
							currentTemp: -20,
							availableCapacity: 2850,
							status: 'online'
						},
						{
							id: 2,
							type: 'cold',
							name: '冷藏区',
							currentTemp: 2,
							availableCapacity: 4200,
							status: 'online'
						},
						{
							id: 3,
							type: 'fresh',
							name: '保鲜区',
							currentTemp: 8,
							availableCapacity: 3600,
							status: 'warning'
						},
						{
							id: 4,
							type: 'room',
							name: '常温区',
							currentTemp: 20,
							availableCapacity: 2200,
							status: 'online'
						}
					],
					scheduleData: [
						{
							warehouse: '北京大兴',
							morning: [
								{time: '08-10', status: 'available'},
								{time: '10-12', status: 'busy'}
							],
							afternoon: [
								{time: '13-15', status: 'reserved'},
								{time: '15-17', status: 'available'}
							],
							evening: [
								{time: '18-20', status: 'available'},
								{time: '20-22', status: 'available'}
							]
						},
						{
							warehouse: '上海浦东',
							morning: [
								{time: '08-10', status: 'busy'},
								{time: '10-12', status: 'busy'}
							],
							afternoon: [
								{time: '13-15', status: 'busy'},
								{time: '15-17', status: 'reserved'}
							],
							evening: [
								{time: '18-20', status: 'available'},
								{time: '20-22', status: 'available'}
							]
						},
						{
							warehouse: '广州白云',
							morning: [
								{time: '08-10', status: 'available'},
								{time: '10-12', status: 'available'}
							],
							afternoon: [
								{time: '13-15', status: 'available'},
								{time: '15-17', status: 'available'}
							],
							evening: [
								{time: '18-20', status: 'reserved'},
								{time: '20-22', status: 'available'}
							]
						}
					],
					monitorData: {
						avgTemperature: -2.5,
						avgHumidity: 65,
						powerConsumption: 1285,
						alarmCount: 2
					},
					alerts: [
						{
							id: 1,
							title: '温度波动预警',
							message: '上海浦东3号冷冻区温度波动超过阈值',
							time: '2小时前'
						}
					]
				}
			},
			methods: {
				getProgressColor(percentage) {
					if (percentage < 50) return '#67C23A';
					if (percentage < 80) return '#E6A23C';
					return '#F56C6C';
				},
				
				initCapacityChart() {
					const chart = echarts.init(document.getElementById('capacityChart'));
					
					const hours = [];
					const utilizationData = [];
					
					// 生成24小时数据
					for (let i = 0; i < 24; i++) {
						hours.push(i + ':00');
						utilizationData.push(Math.round((Math.random() * 30 + 60) * 10) / 10);
					}
					
					const option = {
						tooltip: {
							trigger: 'axis',
							formatter: '{b}: {c}%'
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: hours,
							axisLine: {
								lineStyle: {
									color: '#ccc'
								}
							}
						},
						yAxis: {
							type: 'value',
							name: '利用率(%)',
							max: 100,
							axisLine: {
								lineStyle: {
									color: '#ccc'
								}
							}
						},
						series: [{
							name: '容量利用率',
							type: 'line',
							data: utilizationData,
							smooth: true,
							lineStyle: {
								color: '#667eea',
								width: 3
							},
							areaStyle: {
								color: {
									type: 'linear',
									x: 0, y: 0, x2: 0, y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(102, 126, 234, 0.3)'
									}, {
										offset: 1, color: 'rgba(102, 126, 234, 0.05)'
									}]
								}
							},
							symbol: 'circle',
							symbolSize: 6,
							itemStyle: {
								color: '#667eea'
							}
						}]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				queryAvailableSpace() {
					this.$message.success('正在查询可用空间...');
				},
				
				checkTimeSlots() {
					this.$message.success('正在检查空闲时段...');
				},
				
				monitorTemperature() {
					this.$message.info('打开温度监控界面');
				},
				
				refreshData() {
					this.$message.success('数据已刷新');
					// 模拟数据更新
					this.resourceOverview.availableCapacity += Math.floor(Math.random() * 100 - 50);
					this.resourceOverview.utilizationRate += Math.round((Math.random() - 0.5) * 5 * 10) / 10;
				}
			},
			
			mounted() {
				this.$nextTick(() => {
					this.initCapacityChart();
				});
				
				// 定时刷新数据
				setInterval(() => {
					this.refreshData();
				}, 300000); // 5分钟更新一次
			}
		});
	</script>
</body>
</html>